import React, { useEffect, useState } from 'react';
import { Card, Col, Row, Avatar, List } from 'antd';
import { HomeOutlined } from '@ant-design/icons'
import _ from 'lodash'
import axios from 'axios';

export default function News() {
    const [list, setList] = useState([])
    useEffect(() => {
        axios.get("/news?publishState=2&_expand=category").then(res => {
            setList(Object.entries(_.groupBy(res.data, item => item.category.title)))
        })
    }, [])
    return (
        <div>
            {/* 标题 */}
            <h1 style={{ marginBottom: '50px', textAlign: 'center' }}>
                <a href="/" style={{ textDecoration: "none" }}>
                    <HomeOutlined style={{ marginRight: "15px", color: "#01a5da" }} />
                </a>
                全球大新闻 | 预览
            </h1>
            <Row gutter={[16, 16]} style={{ width: '90%', margin: '0 auto' }}>
                {
                    list.map(item =>
                        <Col span={8} key={item[0]}>
                            <Card title={item[0]} hoverable={true} bordered={true}>
                                <List
                                    dataSource={item[1]}
                                    pagination={{ pageSize: 3 }}
                                    renderItem={(data, index) => (
                                        <List.Item>
                                            <List.Item.Meta
                                                avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}
                                                title={<a style={{ color: "#316A80" }} href={`#/detail/${data.id}`}>{data.title}</a>}
                                            />
                                        </List.Item>
                                    )}
                                />
                            </Card>
                        </Col>
                    )
                }
            </Row>

        </div>
    )
}
